<template>
  <div style="display: flex; align-items: center; justify-content: center">
    <MoneyInput
      :fieldConfig="fieldConfig"
      :placeholder="placeholder"
      :size="size" :auth="auth"
      v-model="innerValue[0]"/>
    ~
    <MoneyInput
      :fieldConfig="fieldConfig"
      :placeholder="placeholder"
      :size="size" :auth="auth"
      v-model="innerValue[1]"/>
  </div>
</template>
<script>
import MoneyInput from '@comp/hhd/design/FormField/fields/MoneyInput.vue';
import {createProps} from '@/utils';

export default {
  name: 'MoneySearch',
  components: {MoneyInput},
  props: {
    placeholder: createProps(String),
    fieldConfig: createProps(Object),
    value: createProps(Array, () => undefined),
    size: createProps(String),
    auth: createProps(String),
  },
  methods: {
    change(v) {
      this.$emit('update:value', v);
    },
  },
  computed: {
    innerValue: {
      get() {
        let result = this.value || [undefined, undefined];
        !this.value && this.change(result);
        return result;
      },
      set(v) {
        this.change(v);
      }
    }
  }
};
</script>